<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../lib/css/elementui.css"/>
		<link rel="stylesheet" type="text/css" href="../css/common.css"/>
		<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
		<script src="https://webapi.amap.com/maps?v=1.4.11&key=5bb3370541035b73125e45ea608e65ff&plugin=AMap.Geocoder"></script>

		<script src="../../lib/js/uitl.js"></script>
	</head>

	<body>
		<div id="ele">
			<el-container>
				<el-header>
					<el-row :gutter="20">
						<el-col :span="5">
							<div class="header-bj header-left">
								{{time}}
							</div>
						</el-col>
						<el-col :span="14">
							<div class="header-center">
								<h3>消防联动预警平台</h3>
							</div>
						</el-col>
						<el-col :span="5">
							<div class="header-right">
								<div class="header-bj  header-text">
									<p>消防一中队</p>
								</div>
								<div class="header-bj  header-btn" @click="Quit">退出</div>
							</div>
						</el-col>
					</el-row>
				</el-header>
				<el-main style='position: relative;'>
					<div class="main-content">
						<div class="map-box">
							<div class="map-input">
								<p>当前检索范围（米）：{{intRange}}</p>
								<input @keyup.enter="setRange" @input="verifyNum"/>
							</div>
							<div id="gd-map" v-on:contextmenu.prevent='alertRange'></div>
							<div class="trap-left"></div>
							<div class="trap-right"></div>
							<div class="rangeList" v-show ='isShowRange'>
								<li v-for="(item,index) in arrRange" @click="checkRange(item)" >检索范围{{item}}米</li>
							</div>
						</div>
						<div class="main-table">
							<h3><img src="../images/main_ld.png"/><span>报警信息显示列表</span></h3>
							<div class="table-body" style="overflow: hidden;">
								<el-scrollbar style="height:100%">
									 <el-table :data="arrStation"  style="width: 100%;" ref="stationTable"  @selection-change="handleSelectionChange">
										<el-table-column type="selection" checked width="50">
										</el-table-column>
										<el-table-column prop="Station_number"label="微站编号" show-overflow-tooltip>
										</el-table-column>
										<el-table-column prop="Station_name" label="微站名称" show-overflow-tooltip>
										</el-table-column>
										<el-table-column prop="Distance" label="距离火灾地（米）" show-overflow-tooltip>
										</el-table-column>
										<el-table-column prop="Manager_name" label="负责人" show-overflow-tooltip>
										</el-table-column>
										<el-table-column prop="Contact1" label="联系电话1" show-overflow-tooltip>
										</el-table-column>
										<el-table-column prop="Contact2" label="联系电话2" show-overflow-tooltip>
										</el-table-column>
										<el-table-column prop="Belong_area_name" label="所属辖区" show-overflow-tooltip>
										</el-table-column>										
									</el-table>	
			                    </el-scrollbar>
		                    </div>
						</div>
					</div>
						<div class="main-right">
							<el-scrollbar style='height: 100%;'>
								<ul>
									<li class="aside-box" v-for="(item,index) in arrAreaInfo">
										<div class="aside-checkbox">
											<el-checkbox></el-checkbox>
										</div>
										<div class="aside-box-wraper">
											<h5>辖区{{index+1}}</h5>
											<table cellspacing="0" cellpadding="0" class="aside-info">
												<tr>
													<td>编号</td>
													<td>：</td>
													<td>{{item.Number}}</td>
												</tr>
												<tr>
													<td>名称</td>
													<td>：</td>
													<td>{{item.Name}}</td>
												</tr>
												<tr>
													<td>负责人</td>
													<td>：</td>
													<td>{{item.Manager_name}}</td>
												</tr>
												<tr>
													<td>联系电话1</td>
													<td>：</td>
													<td>{{item.Manager_contact1}}</td>
												</tr>
												<tr>
													<td>联系电话2</td>
													<td>：</td>
													<td>{{item.Manager_contact2}}</td>
												</tr>
											</table>
										</div>
									</li>
								</ul>
								<div style="height: 50px;"></div>
							</el-scrollbar>
							<div class="aside-set">
								<div class="btn-set" @click="setFireInfo">创建</div>
							</div>
						</div>
				</el-main>
			</el-container>
		</div>
	</body>
	<script src="../lib/js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="../lib/js/elementui.js" type="text/javascript" charset="utf-8"></script>
	<script src="../lib/js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/config.js"></script>
	<script src="../js/fire_first.js" type="text/javascript" charset="utf-8"></script>
</html>